<template>
    <view class="page">
        <view class="page-flex-top">
            <view class="search">
                <input type="text" placeholder="搜索专家" placeholder-style="color:#B5B5B5;" v-model="keyWord">
                <icon class="input-icon" type="search" size="20"></icon>
            </view>
        </view>
        <view class="page-list">
            <view class="null" v-if="isShow">
                暂无专家入驻~
            </view>
            <view class="page-list-item" v-for="(item, index) in expertsList" :key="index" @click="skipDetail(item.id)">
                <view class="item-head">
                    <view class="item-head-left">
                        <img :src="item.photo_url" mode="aspectFill"/>
                    </view>
                    <view class="item-head-center">
                        <text class="name">{{item.realname}}</text>
                        <text class="tip">{{item.position}}</text>
                    </view>
                    <view class="item-head-right">
                        <img :src="File_Url+'allocation.png'" />
                        <text>{{item.city.substr(0,2)}}</text>
                    </view>
                </view>
                <view class="item-content">
                    <view class="item-content-top">
                        <img :src="File_Url+'speciality-icon.png'" />
                        <text>擅长领域</text>
                    </view>
                    <view class="item-content-center">
                        {{item.strengths}}
                    </view>
                    <view class="item-content-bottom">
                        <text v-for="(range, ids) in item.expert_label" :key="ids">{{range}}</text>
                    </view>
                </view>
            </view >

            <view class="null">
                <text v-if="expertsTotal == expertsList.length && !showLoading">没有更多了哦～</text>
                <load-more :loading="true" :tip="'加载中'" v-if="showLoading"></load-more>
            </view>
        </view>
    </view>
</template>

<script>
    import loadMore from "../components/loadMore/loadMore";
    export default {
        name: "expertLibrary",
        components: {loadMore},
        data(){
            return{
                File_Url: this.$api.FILE_URL,
                keyWord: '',
                page: 1,
                expertsList: [],
                expertsTotal:0,
                showLoading:false,
                isShow:false
            }
        },
        onLoad(){
            this.getExpertsList()
        },
        methods:{
            //获取专家列表
            async getExpertsList(){
                this.showLoading = true;
                let params = {
                    keyword: this.keyWord,
                    limit: 10,
                    page: this.page
                }
                const res = await this.$api.getExpertsList(params);
                if (res.data.level == 'success'){
                    if (this.page == 1){
                        this.expertsList = res.data.data
                    } else {
                        this.expertsList = this.expertsList.concat(res.data.data)
                    }
                    this.expertsTotal = res.data.page_info.total;
                    if(this.expertsList.length == 0){
                        this.isShow=true
                    }
                }
                this.showLoading = false;
            },
            //跳转详情页面
            skipDetail(id){
                uni.navigateTo({
                    url: '/pages/expertLibrary/expertDetail/expertDetail?expertId='+id
                })
            }
        },
        onReachBottom(){
            if (this.expertsTotal != this.expertsList.length){
                this.page++;
                this.getExpertsList();
            }
        },
        watch:{
            keyWord(newValue, oldValue){
                this.getExpertsList()
            }
        }
    }
</script>

<style scoped lang="scss">
    @import '~@/static/scss/mixin.scss';
    .page{
        padding-top: 100rpx;
        min-height: calc(100vh - 100rpx);
        background: #F8F8F8;
    }
    .page-flex-top{
        position: fixed;
        top: 0;
        left: 0;
        height: 100rpx;
        width: 100vw;
        background: #ffffff;
        .search{
            padding: 20rpx 40rpx;
            position: relative;
            height: 60rpx;
            input{
                width: calc(100% - 84rpx);
                padding: 10rpx 10rpx 10rpx 70rpx;
                font-size: 28rpx;
                line-height: 40rpx;
                background: rgba(219, 219, 219, 0.2);
                border: 2rpx solid rgba(219, 219, 219, 0.3);
                border-radius: 30rpx;
                color: #B5B5B5;
            }
            .input-icon{
                position: absolute;
                top: 30rpx;
                left: 60rpx;
            }
        }
    }
    .page-list{
        padding: 30rpx;
        .page-list-item{
            background: #FFFFFF;
            margin-bottom: 30rpx;
            border-radius: 16rpx;
            box-shadow: 0 3rpx 10rpx 0 rgba(0, 0, 0, 0.1);
            padding: 0 30rpx;
            .item-head{
                padding: 30rpx 0;
                @include flex(flex-start);
                flex-direction: row;
                border-bottom: 1rpx solid #E5E5E5;
                .item-head-left{
                    width: 110rpx;
                    height: 110rpx;
                    border-radius: 360rpx;
                    overflow: hidden;
                }
                .item-head-center{
                    padding: 0 20rpx;
                    @include flex(flex-start,flex-start);
                    flex-direction: column;
                    .name{
                        height: 52rpx;
                        line-height: 52rpx;
                        font-size: 32rpx;
                        font-weight: bold;
                    }
                    .tip{
                        height: 35rpx;
                        line-height: 35rpx;
                        color: #666666;
                        font-size: 24rpx;
                    }
                }
                .item-head-right{
                    margin-left: auto;
                    @include flex(flex-start);
                    flex-direction: row;
                    img{
                        width: 30rpx;
                        height: 30rpx;
                        margin-right: 14rpx;
                    }
                    text{
                        color: #666666;
                        font-size: 24rpx;
                        height: 40rpx;
                        line-height: 40rpx;
                    }
                }
            }
            .item-content{
                padding: 30rpx 0 40rpx 0;
                .item-content-top{
                    @include flex(flex-start);
                    flex-direction: row;
                    padding-bottom: 15rpx;
                    img{
                        width: 36rpx;
                        height: 36rpx;
                    }
                    text{
                        height: 36rpx;
                        line-height: 36rpx;
                        color: #666666;
                        font-size: 24rpx;
                    }
                }
                .item-content-center{
                    color: #666666;
                    font-size: 28rpx;
                    line-height: 40rpx;
                    height: 80rpx;
                    @include ellipsis(2);
                }
                .item-content-bottom{
                    @include flexWrap(flex-start);
                    flex-direction: row;
                    padding-top: 30rpx;
                    text{
                        font-size: 24rpx;
                        height: 48rpx;
                        line-height: 48rpx;
                        padding: 0 16rpx;
                        border-radius: 30rpx;
                        background: #3782FF;
                        color: #FFFFFF;
                        margin-right: 10rpx;
                    }
                }
            }
        }
    }
</style>